<template>
  <div class="todo-page">
    <h1>待办事项管理</h1>
    
    <div class="todo-input">
      <a-input 
        v-model:value="newTodo" 
        placeholder="请输入新的待办事项" 
        @pressEnter="addTodo"
        style="width: 300px; margin-right: 10px;"
      />
      <a-button type="primary" @click="addTodo">添加</a-button>
    </div>
    
    <div class="todo-list">
      <a-list
        :data-source="todos"
        :locale="{ emptyText: '暂无待办事项' }"
      >
        <template #renderItem="{ item }">
          <a-list-item>
            <a-checkbox 
              :checked="item.completed" 
              @change="(e) => toggleTodo(item.id, e.target.checked)"
            />
            <span 
              :style="{ 
                textDecoration: item.completed ? 'line-through' : 'none',
                marginLeft: '10px',
                color: item.completed ? '#999' : '#333'
              }"
            >
              {{ item.text }}
            </span>
            <template #actions>
              <a-button 
                type="text" 
                danger 
                size="small"
                @click="removeTodo(item.id)"
              >
                删除
              </a-button>
            </template>
          </a-list-item>
        </template>
      </a-list>
    </div>
    
    <div class="todo-stats" v-if="todos.length > 0">
      <p>总计: {{ todos.length }} 项 | 已完成: {{ completedCount }} 项 | 未完成: {{ todos.length - completedCount }} 项</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TodoPage',
  data() {
    return {
      newTodo: '',
      todos: [
        { id: 1, text: '学习Vue3', completed: false },
        { id: 2, text: '学习Vue Router', completed: false },
        { id: 3, text: '完成项目', completed: false }
      ]
    }
  },
  computed: {
    completedCount() {
      return this.todos.filter(todo => todo.completed).length
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        const todo = {
          id: Date.now(),
          text: this.newTodo.trim(),
          completed: false
        }
        this.todos.push(todo)
        this.newTodo = ''
      }
    },
    toggleTodo(id, completed) {
      const todo = this.todos.find(t => t.id === id)
      if (todo) {
        todo.completed = completed
      }
    },
    removeTodo(id) {
      this.todos = this.todos.filter(t => t.id !== id)
    }
  }
}
</script>

<style scoped>
.todo-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.todo-input {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.todo-list {
  margin-bottom: 20px;
}

.todo-stats {
  text-align: center;
  color: #666;
  font-size: 14px;
}

h1 {
  text-align: center;
  color: #1890ff;
  margin-bottom: 30px;
}
</style>
